<template>
 <transition name="slide">
    <div class="wrapper">
            <div class="back" @click="goBack">
                <i class="icon-back"></i>
            </div>
            <h1 class="singer_title">{{title}}</h1>
            <div class="singer_bg" :style="bgStyle">
                <div class="play_wrapper">
                    <div class="play">
                        <i class="icon-play"></i>
                        <span class="text_play">随机播放全部</span>
                    </div>
                </div>
                <div class="filter"></div>
            </div>
        <!-- 播放列表 -->
        <div class="bg_layer">
            <music-list v-if="songs.length" :songs="songs"></music-list>
            <!-- 没有数据使用loading -->
            <div v-show="!songs.length" class="loading_container">
                <loading></loading>
            </div>
        </div>
    </div>
</transition>
</template>

<script>
/* eslint-disable */
import {mapGetters} from 'vuex'
import { getSingerDetail } from 'api/singer'
import { ERR_OK } from "api/config"
import { createSong } from "common/js/song"
import musicList from 'base/music-list/music-list'
import loading from 'base/loading/loading'
export default {
  components: {
      musicList,
      loading
  },
  props: {},
  data () {
    return {
        songs: []
    }
  },
  computed: {
    title () {
        return this.singer.name
    },
    bgImage () {
        return this.singer.avatar
    },
    // 取值，由于singer是一个数组
    ...mapGetters([
        'singer'
  
    ]),
    bgStyle () {
        return `background-image:url(${this.singer.avatar})`
    }
  },
  methods: {
      initData () {
        // 如果singer没有数据,处理maps的数据，处理这个页面刷新没有数据的情况
        if (!this.singer.mid) {
            this.$router.push('/singer')
            return
        }
        // 获取详情页数据
        getSingerDetail(this.singer.mid).then(res => {
            if (res.code === ERR_OK) {
                this.songs = this.filterData(res.data.list)
            }
        })
      },
      filterData (data) {
          let ret = []
          data.forEach((item, index) => {
                let {musicData} = item
                if(musicData.songid && musicData.albummid) {
                    ret.push(createSong(musicData))
                }
          })
          return ret
      },
      // 返回按钮
      goBack () {
          this.$router.go(0)
      }
  },
  created () {
    this.initData()
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.loading_container{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
  .slide-enter-active, .slide-leave-active{
      transition: all 0.3s
  }
  .slide-enter, .slide-leave-to{
    transform: translate3d(100%, 0, 0)
  }
.wrapper{
    position: fixed;
    z-index: 100;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: #222;
    color:#fff;
    .back{
        position: absolute;
        top:0;
        left:6px;
        z-index: 50;
        .icon-back{
            display: block;
            padding: 10px;
            font-size: 22px;
            color:#ffcd32;
        }
    }
    .singer_title{
        position: absolute;
        top:0;
        left:10%;
        z-index: 50;
        width: 80%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        color:#fff;
    }
    .singer_bg{
           position: relative;
            width: 100%;
            height: 0;
            padding-top: 70%;
            transform-origin: top;
            background-size: cover;
            transform: scale(1);
        .play_wrapper{
            position: absolute;
            bottom: 20px;
            z-index: 50;
            width: 100%;
            .play{
                color:#ffcd32;
                width:135px;
                margin:0 auto;
                padding: 7px 0;
                text-align: center;
                border:1px solid #ffcd32;
                border-radius: 100px;
                font-size: 0;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .icon-play{
                    font-size: 16px;
                    margin-right: 6px;
                }
                .text_play{
                    font-size: 12px;
                }
            }
        }
    }
    .filter{
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        background: rgba(7,17,27,0.4);
    }
}
</style>